import React from 'react';
import ReactDOM from 'react-dom';
import { Tree, SearchBar, Icon, Button } from 'weaver-mobile';
import {inject, observer} from 'mobx-react';
export default class SelectDir extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [{
        "childs": [{
          "childs": [{
            "childs": [{
              "haschild": false,
              "isopen": false,
              "key": "863",
              "name": "0010201"
            }],
            "haschild": true,
            "isopen": true,
            "key": "862",
            "name": "00102"
          }],
          "haschild": true,
          "isopen": true,
          "key": "823",
          "name": "001"
        }],
        "haschild": true,
        "isopen": true,
        "key": "822",
        "name": "测试：非本人强制清空"
      },
      {
        "childs": [{
          "haschild": false,
          "isopen": false,
          "key": "883",
          "name": "456"
        },
        {
          "childs": [{
            "haschild": false,
            "isopen": false,
            "key": "844",
            "name": "567"
          }],
          "haschild": true,
          "isopen": true,
          "key": "841",
          "name": "123"
        }],
        "haschild": true,
        "isopen": true,
        "key": "821",
        "name": "测试：非本人强制清空"
      }],
      search: '',
      expandedNodeKeys: [],
      checkedNodeKeys: [],
    };
  }
  render() {
    const { datas, search, expandedNodeKeys, checkedNodeKeys } = this.state;
    return (
      <div>
        <SearchBar placeholder="输入行业名称" onChange={this.handleChange} onSubmit={this.handleSearch} />
        <Tree
          multiple={false}
          async
          checkedAll={false}
       
          onAsyncSelect={node => new Promise((resolve) => {
            // 使用定时器模拟axios异步获取数据
            const timer = setTimeout(() => {
              const key = node.key;
              const data = [{
                childs: [{ haschild: false, isopen: false, key: `${key}-11`, name: '内部留言' }],
                haschild: true,
                isopen: true,
                key: `${key}-1`,
                name: 'fsffsfdfdddddddddddddddd',
              },
              {
                childs: [{ haschild: true, isopen: true, key: `${key}-21`, name: '系统提醒工作流', childs: [{ haschild: true, isopen: true, key: `${key}-211`, name: '内部留言', childs: [{ haschild: false, isopen: false, key: `${key}-2111`, name: '内部留言' }, { haschild: false, isopen: false, key: `${key}-2112`, name: '外部留言' }] }] }],
                haschild: true,
                isopen: true,
                counts: 3,
                key: `${key}-2`,
                name: '默认流程',
              }];
              resolve(data);
              clearTimeout(timer);
            }, 1000);
          })
          }
          datas={datas}
          search={search}
          checkable={1}
          checkedAll
          checkedFather
          // checkedChild
          expandedNodeKeys={expandedNodeKeys}
          checkedNodeKeys={checkedNodeKeys}
          icon={<Icon type="ellipsis" />}
          onExpanded={(...arg) => { console.log('Expanded:', arg); this.setState({ expandedNodeKeys: arg[0] }); }}
          onChecked={(...arg) => { console.log('Checkeds:', arg); this.setState({ checkedNodeKeys: arg[0] }); }}
          onChange={(state) => { console.log('Datas:', state); this.setState({ datas: state }); }}
        />
        <Button onClick={()=>{}} style={{position:'absolute',bottom:'0px',display:'inline-block' ,width:'50%'}}>新增目录</Button>
        <Button type="primary" onClick={()=>alert(this.state.checkedNodeKeys)} style={{position:'absolute',bottom:'0px',right:'0px',display:'inline-block',width:'50%'}}>确定</Button>
      </div>
    );
  }
  handleSearch = (value) => {
    this.setState({
      search: value,
    });
  }
  handleExtended = () => {
    this.setState({
      expandedNodeKeys: ['2', '21'],
    });
  }
  handleChecked = () => {
    this.setState({
      checkedNodeKeys: ['2', '211'],
    });
  }
}